<template>
  <div v-pull-down-container-height="!isPullRefreshLoading" v-skeleton="isPageLoad" class="page page-tabbar page-root-home">
    <van-pull-refresh v-model="isPullRefreshLoading" @refresh="onRefresh">
      <!--head-->
      <div id="TopHeader" class="head-swiper" :class="{'is-none':isPageLoad && !bannerList.length}">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item :key="item.bannerId" v-for="item in bannerList">
            <img @click="$router.push({path:'/goodsdetail',query:{productId:item.productId}})" v-lazy="item.picUrl"/>
          </van-swipe-item>
        </van-swipe>
        <!--搜索-->
        <search class="search-header-top" :fixed="isPageLoad && !bannerList.length" :scroll-top="1"/>
      </div>
      <!-- 顶部菜单-->
      <ul class="top-module">
        <router-link tag="li" :to="{path:'/newproduct',query:{id:topClass.indexClassId}}">
          <i class="i_every_new" :style="{backgroundImage:'url('+topClass.picUrl+')'}"></i>
          <p>{{topClass.indexClassName}}</p>
        </router-link>
        <li @click="plusWebviewOpen('http://ycsn.ycqpmall.com/index.html')">
          <i class="i_every_special"></i>
          <p>配件查询</p>
        </li>
        <li @click="plusWebviewOpen('http://www.showtao.com/mobile/cxxz1.html?typeid=2')">
          <i class="i_class"></i>
          <p>版型区分</p>
        </li>
        <router-link tag="li" :to="{path:'/category'}">
          <i class="i_more_class"></i>
          <p>商品分类</p>
        </router-link>
      </ul>
      <div class="space-gutter-row"></div>
      <!--次要菜单-->
      <ul class="help-module">
        <router-link tag="li" :to="{path:'/about'}">
          <i class="i_service"></i>
          <p>关于我们</p>
        </router-link>
        <li @click="$kefu({type:'online'})">
          <i class="i_about"></i>
          <p>在线咨询</p>
        </li>
      </ul>
      <div class="space-gutter-row"></div>
      <!--热卖排行_头部-->
      <div class="menu-head">
        <div class="name-detail">
          <i class="i_hot_rank"></i>
          <p class="is-hot">{{hotRank.indexClassName}}</p>
        </div>
        <router-link tag="div" :to="{path:'/productlist',query:{id:hotRank.indexClassId,tag:hotRank.indexClassName}}"
                     class="more">
          <span>更多</span>
          <i class="iconfont icon-icon"></i>
        </router-link>
      </div>
      <!--热卖排行_列表-->
      <div class="hot-rank">
        <router-link tag="div"
                     v-if="hotRank.prodList.length"
                     :to="{path:'/goodsdetail',query:{productId:hotRank.prodList[0].productId}}"
                     class="large-group">
          <div class="detail">
            <div class="item-head">
              <i class="i_no1"></i>
              <p>{{hotRank.prodList[0].productName}}</p>
            </div>
            <p class="remark">{{hotRank.prodList[0].productDesc}}</p>
          </div>
          <div class="goods-icon-wrap">
            <img v-lazy="hotRank.prodList[0].frontPicUrl" class="goods-icon" alt="">
          </div>
        </router-link>
        <ul v-if="hotRank.prodList.length" class="small-group">
          <router-link tag="li" :to="{path:'/goodsdetail',query:{productId:item.productId}}" :key="item.productId"
                       v-for="item in [...hotRank.prodList].splice(1,2)">
            <div class="detail">
              <div class="item-head">
                <i class="i_no2"></i>
                <p>{{item.productName}}</p>
              </div>
              <p class="remark">{{item.productDesc}}</p>
            </div>
            <div class="goods-icon-wrap">
              <img v-lazy="item.frontPicUrl" src="" class="goods-icon" alt="">
            </div>
          </router-link>
        </ul>
      </div>
      <!--今日特价_头部-->
      <div class="menu-head">
        <div class="name-detail">
          <i class="i_today_special"></i>
          <p class="is-special">{{todaySpecial.indexClassName}}</p>
        </div>
        <router-link tag="div"
                     :to="{path:'/productlist',query:{id:todaySpecial.indexClassId,tag:todaySpecial.indexClassName}}"
                     class="more">
          <span>更多</span>
          <i class="iconfont icon-icon"></i>
        </router-link>
      </div>
      <!--今日特价_列表-->
      <ul class="today-special">
        <router-link tag="li" :to="{path:'/goodsdetail',query:{productId:item.productId}}" :key="item.productId"
                     v-for="item in [...todaySpecial.prodList].splice(0,3)">
          <div class="icon-wrap">
            <img v-lazy="item.frontPicUrl">
          </div>
          <div class="detail">
            <p class="name">{{item.productName}}</p>
            <div class="price-info">
              <span class="sale-price">&#165;{{item.price}}</span>
              <span v-if="item.originalPrice!==item.price" class="source-price">&#165;{{item.originalPrice}}</span>
            </div>
          </div>
        </router-link>
      </ul>
      <div v-if="advertisePicUrl">
        <img v-lazy="advertisePicUrl" style="height: 100px;width: 100%;margin-top: 10px;"/>
      </div>
      <!--商品推荐_头部-->
      <div class="menu-head">
        <div class="name-detail">
          <i class="i_recommend"></i>
          <p class="is-recommend">{{recommend.indexClassName}}</p>
        </div>
        <router-link tag="div"
                     :to="{path:'/productlist',query:{id:recommend.indexClassId,tag:recommend.indexClassName}}"
                     class="more">
          <span>更多</span>
          <i class="iconfont icon-icon"></i>
        </router-link>
      </div>
      <!--商品推荐_列表-->
      <ul class="recommend-container">
        <router-link tag="li" :to="{path:'/goodsdetail',query:{productId:item.productId}}" :key="item.productId"
                     v-for="item in [...recommend.prodList]">
          <div class="icon-wrap">
            <img v-lazy="item.frontPicUrl" src="" alt="">
          </div>
          <div class="detail">
            <p class="name">{{item.productName}}</p>
            <div class="price-info">
              <span class="sale-price">&#165;{{item.price}}</span>
              <span v-if="item.originalPrice!==item.price" class="source-price">&#165;{{item.originalPrice}}</span>
            </div>
            <p class="tag">{{item.sales}}已购</p>
          </div>
        </router-link>
      </ul>
    </van-pull-refresh>
  </div>
</template>
<script>
  import './scss/page.root.home.scss'
  import Search from "../../components/Search";
  import page from '../../mixins/page'
  import saveScroll from '../../mixins/save.page.scroll'
  import {pullRefresh, loadMore} from '../../mixins/pull.refresh'

  export default {
    mixins: [page, pullRefresh, loadMore, saveScroll],
    name: 'RootIndex',
    components: {Search},
    data() {
      return {
        bannerList: [],
        topClass: {},
        hotRank: {prodList: [{}, {}, {}]},
        todaySpecial: {prodList: [{}]},
        recommend: {prodList: [{}]},
        advertiseList: [],
        advertisePicUrl: null
      }
    },
    methods: {
      // plusWebviewBind{
      plusWebviewOpen(url) {
        try {
          let w = plus.webview.create(url, '', {
            'titleNView': {
              'backgroundColor': '#FFFFFF',
              'titleText': '',
              'titleColor': '#CCCCCC',
              autoBackButton: true,
              buttons: null
            },
            'backButtonAutoControl': 'close'
          });
          plus.webview.show(w);

        } catch (e) {
          window.location.href = url
        }
      },
      // init
      fetchPage() {
        this.$ajax.home().then().then(
          res => {
            let {bannerList, topClassList, homeProdList, advertiseList} = res.data;
            this.bannerList = bannerList;
            let [hotRank, todaySpecial, recommend] = homeProdList;
            this.hotRank = hotRank;
            this.topClass = topClassList[0];
            this.todaySpecial = todaySpecial;
            this.recommend = recommend;
            this.advertiseList = advertiseList;
            console.log('this.advertiseList',this.advertiseList);
            //this.advertisePicUrl = this.advertiseList[0].picUrl;
            this.loadEnd();
            this.pullRefreshSuccess();
          },
          err => {
            this.loadError();
            this.pullRefreshFail();
          }
        )
      }
    }
  }
</script>
